<template>
  <div class="dashboard-monitor-sentiment">
    <Row type="flex" justify="center" align="middle" v-height="80">
      <Col span="8">
        <span class="dashboard-monitor-sentiment-number">{{ happy }}</span>
      </Col>
      <Col span="8">
        <img src="@/assets/svg/icon-happy.svg">
        <p>正面评论</p>
      </Col>
      <Col span="8">
        <span class="dashboard-monitor-sentiment-percent dashboard-monitor-sentiment-percent-up">{{ happyPercent }}%</span>
      </Col>
    </Row>
    <Divider size="small" />
    <Row type="flex" justify="center" align="middle" v-height="80">
      <Col span="8">
        <span class="dashboard-monitor-sentiment-number">{{ sad }}</span>
      </Col>
      <Col span="8">
        <img src="@/assets/svg/icon-sad.svg">
        <p>负面评论</p>
      </Col>
      <Col span="8">
        <span class="dashboard-monitor-sentiment-percent dashboard-monitor-sentiment-percent-down">{{ sadPercent }}%</span>
      </Col>
    </Row>
  </div>
</template>
<script>
  export default {
    name: 'monitorSentiment',
    data() {
      return {
        happy: 856,
        happyPercent: 82,
        sad: 69,
        sadPercent: 9
      }
    }
  }
</script>
<style lang="less">
  .dashboard-monitor-sentiment {
    text-align: center;
    img {
      height: 50px;
    }
    p {
      color: #808695;
      margin-top: 4px;
    }
    &-number {
      font-size: 24px;
    }
    &-percent {
      font-size: 20px;
      &-up {
        color: #19be6b;
      }
      &-down {
        color: #ed4014;
      }
    }
  }
</style>
